<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="head dispfx flxvc flxhc">
        <img src="./image/矢量智能对象1.png" alt="">
        <p>订单结算</p>
    </div>
    <!-- 1 -->
    <div class="one dispfx flxspb">
        <div class="one-1">
            <img src="./image/组 33.png" alt="">
        </div>
        <div class="one-2">
            <p>莫次有机PWE活性美白洗面奶优惠套装</p>
            <p>标准套装+蓝色</p>
        </div>
        <div class="one-3">
            <p>￥169</p>
            <p>X2</p>
        </div>
    </div>
    <div class="one dispfx flxspb">
        <div class="one-1">
            <img src="./image/组 34.png" alt="">
        </div>
        <div class="one-2">
            <p>莫次有机PWE活性美白洗面奶优惠套装</p>
            <p>标准套装+红色</p>
        </div>
        <div class="one-3">
            <p>￥136</p>
            <p>X1</p>
        </div>
    </div>
    <!-- 2 -->
    <div class="two">
        <ul>
            <li>
                <div>
                    <span style="display: none;"></span><img src="./image/圈选.png" alt="">
                    <p>门店自取</p>
                </div>
                <div>
                    <p>选择门店</p>
                    <img src="./image/Path.png" alt="">
                </div>
            </li>
            <li>
                <div>
                    <span></span><img src="./image/圈选.png" alt="" style="display: none;">
                    <p>物流配送</p>
                </div>
                <div>
                    地址选择
                    <img src="./image/Path.png" alt="">
                </div>
            </li>
            <li style="border: none;">
                <div style="color: #000000;font-size: 0.4rem;">
                    <span></span><img src="./image/圈选.png" alt="" style="display: none;">
                    <p>送TA人(付款后，将由对方填写地址)</p>
                </div>
            </li>
        </ul>
    </div>
    <!-- 3 -->
    <div class="three">
        <ul>
            <li>
                <p>金额</p>
                <p>￥338.00</p>
            </li>
            <li>
                <p>运费 </p>
                <p>￥0.00</p>
            </li>
            <li>
                <p>积分</p>
                <p>无</p>
            </li>
            <li style="border: none;">
                <p>优惠券</p>
                <p>无</p>
            </li>
        </ul>
    </div>
    <!-- 4 -->
    <div class="four">
        <ul>
            <li>
                <p class="four-p dispfx flxvc"><img src="./image/矢量智能对象.png" alt="" style="width: 0.67rem; height: 0.57rem; margin-right: 0.29rem;">微信支付</p>
                <p><span style="display: none;"></span><img src="./image/圈选.png" alt="" class="quan"></p>
            </li>
            <li>
                <p class="four-p2 dispfx flxvc"><img src="./image/矢量智1能对象.png" alt="" style="width: 0.63rem; height: 0.63rem; margin-right: 0.29rem;">余额支付</p>
                <p><span></span><img src="./image/圈选.png" alt="" style="display: none;" class="quan"></p>
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="dibu dispfx">
        <div><span>应付金额：</span>￥338.00</div>
        <div>付款</div>
    </div>
</body>

</html>